<template>
  <div class="unit-index sub-margin">
    <div class="sub-page-title sub-page-return">
      <el-button size="small" icon="el-icon-arrow-left" @click.stop="returnPage">返回</el-button>
      {{ infoName }}
    </div>
    <div class="content">
      <div class="left-con">
        <div class="return-box" v-if="sourceInfo && sourceInfo.reason">
          <el-alert :title="'退回原因：' + sourceInfo.reason" type="error" :closable="false"></el-alert>
        </div>
        <!-- 周纪实 -->
        <WriteContentWeek :info="sourceInfo" v-if="routeQuery.recordType === '01-01'"></WriteContentWeek>
        <!-- 月小结 -->
        <WriteContentMonth :info="sourceInfo" v-if="routeQuery.recordType === '01-02'"></WriteContentMonth>
        <!-- 季度总结 -->
        <WriteContentQuarter
          :info="sourceInfo"
          v-if="routeQuery.recordType === '01-03'"
          @updateDoc="updateDoc"></WriteContentQuarter>
        <WriteContentYear v-if="routeQuery.recordType === '01-05'" :info="sourceInfo"></WriteContentYear>
      </div>
      <div class="right-con" v-if="['01-01', '01-05'].includes(routeQuery.recordType)">
        <WriteHistory></WriteHistory>
      </div>
    </div>
  </div>
</template>
<script>
import { getRecordDetailByPeriod, getWeekRecordForm, getMonthRecordForm, getYearRecordForm } from '@apis/board.js'
import WriteContentWeek from './write/WriteContentWeek'
import WriteContentMonth from './write/WriteContentMonth.vue'
import WriteContentQuarter from './write/WriteContentQuarter'
import WriteContentYear from './write/WriteContentYear'
import WriteHistory from './write/WriteHistory.vue'
export default {
  name: 'indexWrite',
  components: {
    WriteContentWeek,
    WriteContentMonth,
    WriteContentQuarter,
    WriteContentYear,
    WriteHistory,
  },
  data() {
    return {
      routerQuery: {},
      sourceInfo: {},
      infoName: '纪实填写',
    }
  },
  created() {
    this.routeQuery = this.$route.query
    this.initdata()
  },
  methods: {
    returnPage() {
      this.$router.go(-1)
    },
    initdata() {
      if (this.routeQuery.recordType === '01-01') {
        this.getZInit()
      } else if (this.routeQuery.recordType === '01-02') {
        this.getYInit()
      } else if (this.routeQuery.recordType === '01-03') {
        this.getJDInit()
      } else if (this.routeQuery.recordType === '01-05') {
        this.getYearInit()
      }
    },
    getZInit() {
      getWeekRecordForm({
        id: this.routeQuery.id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        if (res.code === 0 && res.data) {
          this.sourceInfo = res.data
          this.infoName = res.data.recordName
        }
      })
    },
    getYInit() {
      getMonthRecordForm({
        id: this.routeQuery.id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        if (res.code === 0 && res.data) {
          this.sourceInfo = res.data
          this.infoName = res.data.recordName
        }
      })
    },
    getJDInit() {
      getRecordDetailByPeriod({
        id: this.routeQuery.id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        if (res.code === 0 && res.data) {
          this.sourceInfo = res.data
          this.infoName = res.data.recordName
        }
      })
    },
    updateDoc() {
      this.getJDInit()
    },
    getYearInit() {
      getYearRecordForm({
        id: this.routeQuery.noteId,
      })
        .then(res => {
          this.sourceInfo = res.data
          this.infoName = '公务员年度考核登记表（' + res.data.year + '年度）'
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';
.unit-index {
  height: 100%;
  .content {
    flex: 1;
    display: flex;
    align-items: stretch;
    padding: 10px 0;
    height: calc(100% - 110px);

    .left-con {
      flex: 1;
      width: 100%;
      max-width: 1400px;
      height: 100%;
      margin: 0 auto;
      margin-left: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .right-con {
      width: 380px;
      height: 100%;
      overflow: hidden;
      position: relative;
      border-right: 1px solid #e4eaf0;
    }
  }
}
</style>
